<template>
  <div class="auction-detail">
    <div class="detail-container">
      <!-- 商品基本信息 -->
      <div class="product-info">
        <div class="product-image">
          <el-image :src="getImageUrl(auctionDetail.product?.pic)" fit="cover" />
        </div>
        <div class="product-details">
          <h1>{{ auctionDetail.product?.name }}</h1>
          <div class="price-section">
            <div class="current-price">
              <span class="label">当前价格</span>
              <span class="price">¥{{ auctionDetail.currentPrice }}</span>
            </div>
            <div class="original-price">
              <span class="label">原价</span>
              <span class="price">¥{{ auctionDetail.product?.price }}</span>
            </div>
            <div class="min-increment">
              <span class="label">最小加价</span>
              <span class="price">¥{{ auctionDetail.stepPrice }}</span>
            </div>
          </div>
          
          <div class="auction-status">
            <div class="time-section" v-if="auctionDetail.status === 1">
              <span class="label">距离结束</span>
              <el-countdown :value="auctionDetail.endTime" format="DD 天 HH:mm:ss" @finish="handleAuctionEnd"/>
            </div>
            <div class="time-section" v-else-if="auctionDetail.status === 0">
              <span class="label">距离开始</span>
              <el-countdown :value="auctionDetail.startTime" format="DD 天 HH:mm:ss" @finish="handleAuctionStart"/>
            </div>
            <div class="time-section" v-else-if="auctionDetail.status === 2">
              <span class="label">拍卖状态</span>
              <span class="ended">已结束</span>
              <div class="winner-info" v-if="bidRecords.length > 0">
                <span class="label">中标者</span>
                <span class="winner">{{ bidRecords[0].userName }}</span>
                <span class="label ml-20">成交价</span>
                <span class="final-price">¥{{ bidRecords[0].bidPrice }}</span>
                <div v-if="bidRecords[0].userId === userStore.userId && !auctionDetail.paid" class="payment-section">
                  <div class="payment-info">
                    <el-alert
                      title="请在24小时内完成支付"
                      type="warning"
                      description="超时未支付可能会影响您的购买资格"
                      show-icon
                      :closable="false"
                    />
                  </div>
                  <el-button type="primary" size="large" class="pay-button" @click="handlePayment">
                    立即支付
                  </el-button>
                </div>
              </div>
              <div class="no-winner" v-else>
                <span class="status">流拍</span>
              </div>
            </div>
          </div>

          <!-- 竞拍操作区 -->
          <div class="bid-section" v-if="auctionDetail.status === 1">
            <div class="bid-input">
              <span class="label">出价</span>
              <el-input-number 
                v-model="bidPrice" 
                :min="auctionDetail.currentPrice + auctionDetail.stepPrice"
                :step="auctionDetail.stepPrice"
                :precision="2"
              />
            </div>
            <el-button type="primary" size="large" @click="handleBid" :loading="bidding">
              立即竞拍
            </el-button>
          </div>
          <div class="remind-section" v-else-if="auctionDetail.status === 0">
            <el-button type="info" size="large" @click="handleRemind">
              开拍提醒
            </el-button>
          </div>
        </div>
      </div>

      <!-- 竞拍记录和商品详情 -->
      <div class="detail-tabs">
        <el-tabs v-model="activeTab">
          <el-tab-pane label="竞拍记录" name="records">
            <div class="bid-records">
              <el-table :data="bidRecords" style="width: 100%">
                <el-table-column prop="userName" label="竞拍人" width="180" />
                <el-table-column prop="bidPrice" label="竞拍价格" width="180">
                  <template #default="scope">
                    ¥{{ scope.row.bidPrice }}
                  </template>
                </el-table-column>
                <el-table-column prop="createTime" label="竞拍时间" />
              </el-table>
            </div>
          </el-tab-pane>
          <el-tab-pane label="商品详情" name="details">
            <div class="product-description">
              <!-- 这里可以放商品的详细描述、图片等 -->
              <div v-html="auctionDetail.product?.description"></div>
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue'
import { Timer, AlarmClock } from '@element-plus/icons-vue'
import { useRoute, useRouter } from 'vue-router'
import { ElMessage, ElMessageBox } from 'element-plus'
import { getAuctionDetail, getAuctionRecords, submitBid, setAuctionReminder, endAuction } from '@/api/auction'
import { useUserStore } from '@/store/modules/user'

const route = useRoute()
const router = useRouter()
const userStore = useUserStore()

const activeTab = ref('records')
const auctionDetail = ref({})
const bidRecords = ref([])
const bidPrice = ref(0)
const bidding = ref(false)

// 定时器引用
let statusCheckTimer = null

// 检查并确保用户信息已加载
const ensureUserInfo = async () => {
  try {
    if (!userStore.id) {
      console.log('用户信息未加载，尝试重新获取...')
      await userStore.getInfo()
      
      if (!userStore.id) {
        console.log('获取用户信息失败，需要重新登录')
        ElMessage.error('登录状态已失效，请重新登录')
        router.push('/login')
        return false
      }
      console.log('成功获取用户信息:', userStore.id)
    }
    return true
  } catch (error) {
    console.error('获取用户信息出错:', error)
    ElMessage.error('获取用户信息失败，请重新登录')
    router.push('/login')
    return false
  }
}

// 获取图片URL
const getImageUrl = (pic) => {
  if (!pic) {
    return new URL('@/assets/images/default-book.jpg', import.meta.url).href
  }
  if (pic.startsWith('http')) {
    return pic
  }
  return import.meta.env.VITE_APP_BASE_API + pic
}

// 获取拍卖详情
const getAuctionDetailData = async () => {
  try {
    const response = await getAuctionDetail(route.params.id)
    if (response.code === 200) {
      const data = {
        ...response.data,
        endTime: new Date(response.data.endTime).getTime(),
        startTime: new Date(response.data.startTime).getTime(),
        currentPrice: Number(response.data.currentPrice),
        stepPrice: Number(response.data.stepPrice)
      }
      auctionDetail.value = data
      bidPrice.value = Number((data.currentPrice + data.stepPrice).toFixed(2))
    }
  } catch (error) {
    console.error('获取拍卖详情失败:', error)
    ElMessage.error('获取拍卖详情失败')
  }
}

// 获取竞拍记录
const getBidRecords = async () => {
  try {
    const response = await getAuctionRecords(route.params.id)
    console.log('竞拍记录返回数据:', response)
    if (response.code === 200) {
      console.log('竞拍记录列表:', response.rows)
      bidRecords.value = response.rows
      
      // 添加用户身份检查日志
      if (bidRecords.value.length > 0) {
        const hasUserInfo = await ensureUserInfo()
        if (hasUserInfo) {
          console.log('当前最高出价:', bidRecords.value[0].bidPrice)
          console.log('出价者ID:', bidRecords.value[0].userId)
          console.log('当前用户ID:', userStore.id)
        }
      }
    }
  } catch (error) {
    console.error('获取竞拍记录失败:', error)
    ElMessage.error('获取竞拍记录失败')
  }
}

// 处理竞拍
const handleBid = async () => {
  if (bidding.value) return
  
  // 确保用户已登录
  if (!await ensureUserInfo()) {
    return
  }
  
  const currentPrice = Number(auctionDetail.value.currentPrice)
  const stepPrice = Number(auctionDetail.value.stepPrice)
  const minPrice = Number((currentPrice + stepPrice).toFixed(2))
  
  if (!bidPrice.value || bidPrice.value < minPrice) {
    ElMessage.error(`竞拍价格不能低于${minPrice}元`)
    return
  }
  
  if (bidPrice.value - currentPrice < stepPrice) {
    ElMessage.error(`每次加价不能低于${stepPrice}元`)
    return
  }
  
  if (bidPrice.value > currentPrice * 10) {
    ElMessage.error('出价不能超过当前价格的10倍')
    return
  }

  try {
    bidding.value = true
    const response = await submitBid({
      auctionId: route.params.id,
      price: Number(bidPrice.value.toFixed(2))
    })
    if (response.code === 200) {
      ElMessage.success('竞拍成功')
      await getAuctionDetailData()
      await getBidRecords()
    }
  } catch (error) {
    console.error('竞拍失败:', error)
    ElMessage.error(error.response?.data?.msg || '竞拍失败')
  } finally {
    bidding.value = false
  }
}

// 处理开拍提醒
const handleRemind = async () => {
  // 确保用户已登录
  if (!await ensureUserInfo()) {
    return
  }
  
  try {
    const response = await setAuctionReminder(route.params.id)
    if (response.code === 200) {
      ElMessage.success('已设置开拍提醒')
    }
  } catch (error) {
    console.error('设置开拍提醒失败:', error)
    ElMessage.error('设置开拍提醒失败')
  }
}

// 处理拍卖开始
const handleAuctionStart = () => {
  ElMessage.info('拍卖已开始')
  getAuctionDetailData()
}

// 定时检查拍卖状态
const checkAuctionStatus = async () => {
  try {
    const response = await getAuctionDetail(route.params.id)
    if (response.code === 200) {
      const newData = {
        ...response.data,
        endTime: new Date(response.data.endTime).getTime(),
        startTime: new Date(response.data.startTime).getTime(),
        currentPrice: Number(response.data.currentPrice),
        stepPrice: Number(response.data.stepPrice)
      }
      
      console.log('检查拍卖状态:', {
        当前状态: auctionDetail.value.status,
        新状态: newData.status,
        结束时间: new Date(newData.endTime).toLocaleString(),
        当前时间: new Date().toLocaleString()
      })
      
      // 如果是进行中或已结束状态，始终获取最新竞拍记录
      if (newData.status === 1 || newData.status === 2) {
        await getBidRecords()
      }
      
      // 检查是否到达结束时间
      const now = Date.now()
      if (now >= newData.endTime && auctionDetail.value.status === 1) {
        console.log('拍卖时间已到，触发结束逻辑')
        await handleAuctionEnd()
        return
      }
      
      // 状态发生变化时处理
      if (auctionDetail.value.status !== newData.status) {
        console.log('拍卖状态发生变化:', {
          原状态: auctionDetail.value.status,
          新状态: newData.status
        })
        
        // 如果拍卖结束，处理中标逻辑
        if (newData.status === 2) {
          console.log('拍卖已结束，准备处理中标逻辑')
          // 确保再次获取最新竞拍记录
          await getBidRecords()
          await handleAuctionComplete(newData)
        }
        // 如果拍卖开始，刷新页面数据
        else if (newData.status === 1) {
          console.log('拍卖已开始')
          handleAuctionStart()
        }
      }
      
      // 更新拍卖详情数据
      auctionDetail.value = newData
    }
  } catch (error) {
    console.error('检查拍卖状态失败:', error)
  }
}

// 处理拍卖完成
const handleAuctionComplete = async (auctionData) => {
  try {
    console.log('开始处理拍卖完成逻辑')
    // 确保用户已登录
    if (!await ensureUserInfo()) {
      console.log('用户未登录，中断处理')
      return
    }
    
    // 先获取最新的拍卖详情
    await getAuctionDetailData()
    // 再获取最新的竞拍记录
    await getBidRecords()
    
    // 确保有竞拍记录
    if (bidRecords.value.length > 0) {
      const winnerRecord = bidRecords.value[0]
      console.log('竞拍记录处理:', {
        当前用户ID: userStore.id,
        最高出价者ID: winnerRecord.userId,
        最高出价: winnerRecord.bidPrice,
        出价时间: winnerRecord.createTime
      })
      
      // 严格判断用户身份
      const isWinner = String(winnerRecord.userId) === String(userStore.id)
      console.log('身份判断结果:', {
        是否为中标者: isWinner,
        判断条件: `${winnerRecord.userId} === ${userStore.id}`
      })
      
      if (isWinner) {
        console.log('确认为中标者，显示中标通知')
        await handleWinnerNotification(winnerRecord)
      } else {
        console.log('非中标者，显示常规结束通知')
        handleNonWinnerNotification(winnerRecord)
      }
    } else {
      console.log('无竞拍记录，显示流拍通知')
      handleNoBidderNotification()
    }
  } catch (error) {
    console.error('处理拍卖完成失败:', error)
    ElMessage.error('处理拍卖结果失败')
  }
}

// 处理中标者通知
const handleWinnerNotification = async (winnerRecord) => {
  try {
    // 显示中标弹窗
    await ElMessageBox.alert(
      `<div style="text-align: center;">
        <h3 style="color: #67C23A; margin-bottom: 20px;">恭喜您成功中标！</h3>
        <p>拍品名称：${auctionDetail.value.product?.name}</p>
        <p>成交价格：¥${winnerRecord.bidPrice}</p>
        <p>中标时间：${new Date().toLocaleString()}</p>
        <div style="margin-top: 20px; padding: 10px; background-color: #FDF6EC; color: #E6A23C; border-radius: 4px;">
          请在24小时内完成支付，超时未支付可能会影响您的购买资格。
        </div>
      </div>`,
      '拍卖成功',
      {
        confirmButtonText: '立即支付',
        dangerouslyUseHTMLString: true,
        type: 'success',
        showClose: false,
        closeOnClickModal: false,
        closeOnPressEscape: false,
        center: true
      }
    ).then(() => {
      // 跳转到订单提交页面
      router.push({
        path: '/order/submit',
        query: {
          productId: auctionDetail.value.productId,
          productName: auctionDetail.value.product?.name,
          price: winnerRecord.bidPrice,
          quantity: 1,
          pic: auctionDetail.value.product?.pic,
          fromAuction: true,
          auctionId: auctionDetail.value.id
        }
      })
    })
  } catch (error) {
    console.error('处理中标通知失败:', error)
    ElMessage.error('处理中标结果失败')
  }
}

// 处理非中标者通知
const handleNonWinnerNotification = (winnerRecord) => {
  ElMessageBox.alert(
    `<div style="text-align: center;">
      <h3 style="margin-bottom: 20px;">拍卖已结束</h3>
      <p>拍品名称：${auctionDetail.value.product?.name}</p>
      <p>最终成交价：¥${winnerRecord.bidPrice}</p>
      <p>中标者：${winnerRecord.userName}</p>
      <p>结束时间：${new Date().toLocaleString()}</p>
    </div>`,
    '拍卖结果',
    {
      confirmButtonText: '确定',
      dangerouslyUseHTMLString: true,
      type: 'info',
      center: true
    }
  ).then(() => {
    // 刷新页面状态
    getAuctionDetailData()
  })
}

// 处理无人竞拍通知
const handleNoBidderNotification = () => {
  ElMessageBox.alert(
    `<div style="text-align: center;">
      <h3 style="margin-bottom: 20px;">拍卖已结束</h3>
      <p>拍品名称：${auctionDetail.value.product?.name}</p>
      <p>竞拍结果：流拍</p>
      <p>结束时间：${new Date().toLocaleString()}</p>
    </div>`,
    '拍卖结果',
    {
      confirmButtonText: '确定',
      dangerouslyUseHTMLString: true,
      type: 'info',
      center: true
    }
  ).then(() => {
    // 刷新页面状态
    getAuctionDetailData()
  })
}

// 处理拍卖结束
const handleAuctionEnd = async () => {
  console.log('执行拍卖结束处理')
  ElMessage.info('拍卖已结束')
  await getAuctionDetailData()
  await getBidRecords()
  
  // 如果有竞拍记录，处理中标逻辑
  if (bidRecords.value.length > 0) {
    console.log('存在竞拍记录，准备处理中标逻辑')
    await handleAuctionComplete(auctionDetail.value)
  } else {
    console.log('无竞拍记录，显示流拍通知')
    handleNoBidderNotification()
  }
}

// 处理支付
const handlePayment = async () => {
  // 确保用户已登录
  if (!await ensureUserInfo()) {
    return
  }
  
  // 跳转到订单提交页面
  router.push({
    path: '/order/submit',
    query: {
      productId: auctionDetail.value.productId,
      productName: auctionDetail.value.product?.name,
      price: bidRecords.value[0].bidPrice,
      quantity: 1,
      pic: auctionDetail.value.product?.pic,
      fromAuction: true,
      auctionId: auctionDetail.value.id
    }
  })
}

onMounted(async () => {
  try {
    // 确保用户已登录
    if (await ensureUserInfo()) {
      await getAuctionDetailData()
      await getBidRecords()
      // 每3秒检查一次状态
      statusCheckTimer = setInterval(checkAuctionStatus, 3000)
    }
  } catch (error) {
    console.error('初始化失败:', error)
  }
})

onUnmounted(() => {
  // 清除定时器
  if (statusCheckTimer) {
    clearInterval(statusCheckTimer)
  }
})
</script>

<style lang="scss" scoped>
.auction-detail {
  padding: 40px;
  background: linear-gradient(135deg, #f6f8fb 0%, #f1f4f9 100%);
  min-height: 100vh;
  
  .detail-container {
    max-width: 1200px;
    margin: 0 auto;
    background-color: #fff;
    border-radius: 24px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    overflow: hidden;
    
    .product-info {
      display: flex;
      gap: 48px;
      padding: 48px;
      
      .product-image {
        flex: 0 0 500px;
        height: 500px;
        border-radius: 16px;
        overflow: hidden;
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
        position: relative;
        
        &::after {
          content: '';
          position: absolute;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
          background: linear-gradient(to bottom, rgba(0,0,0,0) 70%, rgba(0,0,0,0.1));
          pointer-events: none;
        }
        
        .el-image {
          width: 100%;
          height: 100%;
          transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
          
          &:hover {
            transform: scale(1.05);
          }
        }
      }
      
      .product-details {
        flex: 1;
        display: flex;
        flex-direction: column;
        gap: 28px;
        
        h1 {
          font-size: 36px;
          font-weight: 700;
          background: linear-gradient(45deg, #8B4513, #D2691E);
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;
          margin: 0;
          line-height: 1.4;
          letter-spacing: -0.5px;
        }
        
        .price-section {
          display: flex;
          gap: 36px;
          padding: 28px;
          background: linear-gradient(145deg, #ffffff, #f8f9fa);
          border-radius: 16px;
          box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
          
          > div {
            display: flex;
            flex-direction: column;
            gap: 10px;
            
            .label {
              font-size: 15px;
              color: #7f8c8d;
              font-weight: 500;
            }
            
            .price {
              font-size: 26px;
              font-weight: 600;
              color: #2c3e50;
              
              &.original {
                color: #95a5a6;
                text-decoration: line-through;
              }
            }
            
            &.current-price .price {
              background: linear-gradient(45deg, #8B4513, #D2691E);
              -webkit-background-clip: text;
              -webkit-text-fill-color: transparent;
              font-size: 38px;
            }
          }
        }
        
        .auction-status {
          .time-section {
            padding: 28px;
            background: linear-gradient(145deg, #ffffff, #f8f9fa);
            border-radius: 16px;
            box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
            
            .label {
              font-size: 15px;
              color: #7f8c8d;
              font-weight: 500;
              margin-bottom: 10px;
              display: block;
            }
            
            .el-countdown {
              font-size: 28px;
              font-weight: 700;
              background: linear-gradient(45deg, #8B4513, #D2691E);
              -webkit-background-clip: text;
              -webkit-text-fill-color: transparent;
              letter-spacing: 1px;
            }
            
            .ended {
              font-size: 28px;
              font-weight: 700;
              background: linear-gradient(45deg, #e74c3c, #c0392b);
              -webkit-background-clip: text;
              -webkit-text-fill-color: transparent;
            }
            
            .winner-info {
              margin-top: 20px;
              display: flex;
              flex-direction: column;
              gap: 14px;
              
              .label {
                display: inline;
                margin-right: 10px;
              }
              
              .winner {
                color: #8B4513;
                font-weight: 600;
              }
              
              .final-price {
                background: linear-gradient(45deg, #8B4513, #D2691E);
                -webkit-background-clip: text;
                -webkit-text-fill-color: transparent;
                font-weight: 700;
              }
              
              .ml-20 {
                margin-left: 24px;
              }
            }
            
            .no-winner {
              margin-top: 20px;
              
              .status {
                color: #95a5a6;
                font-size: 20px;
                font-style: italic;
                font-weight: 500;
              }
            }
          }
        }
        
        .bid-section {
          margin-top: 28px;
          
          .bid-input {
            margin-bottom: 20px;
            display: flex;
            flex-direction: column;
            gap: 10px;
            
            .label {
              font-size: 15px;
              color: #7f8c8d;
              font-weight: 500;
            }
            
            .el-input-number {
              width: 100%;
              
              :deep(.el-input__wrapper) {
                box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
                border-radius: 12px;
                padding: 8px 12px;
                
                &:hover {
                  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
                }
                
                &.is-focus {
                  box-shadow: 0 4px 16px rgba(139, 69, 19, 0.15);
                }
              }
              
              :deep(.el-input__inner) {
                height: 42px;
                font-size: 16px;
                color: #2c3e50;
              }
            }
          }
          
          .el-button {
            width: 100%;
            height: 52px;
            font-size: 17px;
            font-weight: 600;
            border-radius: 12px;
            background: linear-gradient(45deg, #8B4513, #D2691E);
            border: none;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            
            &:hover {
              transform: translateY(-2px);
              box-shadow: 0 8px 24px rgba(139, 69, 19, 0.25);
            }
            
            &:active {
              transform: translateY(0);
            }
          }
        }
        
        .remind-section {
          margin-top: 28px;
          
          .el-button {
            width: 100%;
            height: 52px;
            font-size: 17px;
            font-weight: 600;
            border-radius: 12px;
            background: linear-gradient(45deg, #95a5a6, #7f8c8d);
            border: none;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            color: #fff;
            
            &:hover {
              transform: translateY(-2px);
              box-shadow: 0 8px 24px rgba(127, 140, 141, 0.25);
            }
            
            &:active {
              transform: translateY(0);
            }
          }
        }
      }
    }
    
    .detail-tabs {
      margin-top: 40px;
      padding: 0 48px 48px;
      
      :deep(.el-tabs__header) {
        margin-bottom: 28px;
      }
      
      :deep(.el-tabs__nav-wrap::after) {
        height: 2px;
        background-color: #ecf0f1;
      }
      
      :deep(.el-tabs__item) {
        font-size: 17px;
        padding: 0 28px;
        height: 52px;
        line-height: 52px;
        transition: all 0.3s ease;
        color: #7f8c8d;
        
        &.is-active {
          font-weight: 600;
          color: #8B4513;
        }
        
        &:hover {
          color: #8B4513;
        }
      }
      
      :deep(.el-tabs__active-bar) {
        background: linear-gradient(45deg, #8B4513, #D2691E);
        height: 3px;
        border-radius: 3px;
      }
      
      .bid-records {
        :deep(.el-table) {
          border-radius: 16px;
          overflow: hidden;
          box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
          
          th {
            background-color: #f8f9fa;
            font-weight: 600;
            color: #2c3e50;
            padding: 20px 0;
          }
          
          td {
            padding: 20px 0;
            color: #34495e;
          }
          
          tr:hover > td {
            background-color: #f8f9fa;
          }
        }
      }
      
      .product-description {
        padding: 28px;
        background: linear-gradient(145deg, #ffffff, #f8f9fa);
        border-radius: 16px;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
        
        :deep(p) {
          margin: 0 0 20px;
          line-height: 1.8;
          color: #34495e;
          font-size: 15px;
        }
        
        :deep(img) {
          max-width: 100%;
          height: auto;
          border-radius: 12px;
          margin: 20px 0;
          box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
        }
      }
    }
  }
}

.payment-section {
  margin-top: 28px;
  
  .payment-info {
    margin-bottom: 20px;
    
    :deep(.el-alert) {
      border-radius: 12px;
      box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
      
      .el-alert__title {
        font-size: 15px;
        font-weight: 600;
      }
      
      .el-alert__description {
        font-size: 14px;
        margin-top: 8px;
      }
    }
  }
  
  .pay-button {
    width: 100%;
    height: 52px;
    font-size: 17px;
    font-weight: 600;
    border-radius: 12px;
    background: linear-gradient(45deg, #8B4513, #D2691E);
    border: none;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    color: #fff;
    
    &:hover {
      transform: translateY(-2px);
      box-shadow: 0 8px 24px rgba(139, 69, 19, 0.25);
    }
    
    &:active {
      transform: translateY(0);
    }
  }
}

// 响应式布局优化
@media screen and (max-width: 768px) {
  .auction-detail {
    padding: 20px;
    
    .detail-container {
      .product-info {
        flex-direction: column;
        gap: 32px;
        padding: 24px;
        
        .product-image {
          flex: none;
          height: 300px;
        }
      }
      
      .detail-tabs {
        padding: 0 24px 24px;
      }
    }
  }
}
</style> 